body {
  font-family: "Rubik", sans-serif;
  font-size: 2.2rem;
  line-height: 3.6rem;
  min-height: 100%;
  height: 100%;
}

html {
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: baseline;
  min-height: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

:root {
  font-size: 62.5%;
  --font-h1: 6.8rem;
  --font-h2: 5.6rem;
  --font-h3: 4rem;
  --font-h4: 3rem;
  --font-body: 2.2rem;
  --font-small: 1.8rem;

  --lineHeight-h1: 7.2rem;
  --lineHeight-h2: 6.2rem;
  --lineHeight-h3: 5rem;
  --lineHeight-h4: 3.8rem;
  --lineHeight-body: 3.6rem;
  --lineHeight-small: 3rem;

  --br-xsmall: 0.2rem;
  --br-small: 0.4rem;
  --br-medium: 0.8rem;
  --br-large: 1.2rem;

  --pitchBlack: #0c0c0d;
  --computerBlack: #18181a;
  --carkol: 212224;
  --chandelure: #29292a;
  --perfectGray: #2c2c2e;
  --zekrom: #2b2b2e;
  --pancham: #38383a;
  --pangoro: #383a3b;
  --duskull: #4b4a4b;
  --espurr: #5a5a5e;
  --steelix: #666767;
  --rhyhorn: #7d7d7e;
  --dusclups: #939496;
  --retroGray: #aaaaad;
  --handheldMedium: #a4a7b0;
  --dewgon: #b4b4b7;
  --chargerGray: #cacdd8;
  --reshiram: #d7d7da;
  --pearl: #dddddd;
  --superLight: #e6e7ec;
  --extraLight: #ededf0;
  --consoleWhite: #f9fafc;

  /* brand */
  --brand50: #fde7ed;
  --brand100: #fcb9cd;
  --brand200: #fa8aab;
  --brand300: #f75b8a;
  --brand400: #f62e6a;
  /* base */
  --brand500: #f50049;
  --brand600: #c9003b;
  --brand700: #9b002e;
  --brand800: #700021;
  --brand900: #430013;
  --brand1000: #170006;

  /* blue */
  --primary50: #eaf7ff;
  --primary100: #63e7ff;
  --primary200: #9bd9ff;
  --primary300: #74caff;
  --primary400: #4dbaff;
  --primary500: #25abff; /*base*/
  --primary600: #208dd0;
  --primary700: #196da3;
  --primary800: #124e74;
  --primary900: #0a2e45;
  --primary1000: #031018;

  /* red */
  --error50: #fdedec;
  --error100: #facac6;
  --error200: #f7a6a0;
  --error300: #f3837a;
  --error400: #f06055;
  --error500: #ee3d30; /*base*/
  --error600: #c33128;
  --error700: #972720;
  --error800: #6d1b17;
  --error900: #41110d;
  --error1000: #160504;

  /* yellow */
  --warning50: #fcf4c0;
  --warning100: #faed97;
  --warning200: #fcf4c0;
  --warning300: #f7e76e;
  --warning400: #f6e045;
  --warning500: #f4da1e; /*base*/
  --warning600: #c9b419;
  --warning700: #9b8b13;
  --warning800: #70640d;
  --warning900: #433b09;
  --warning1000: #171303;

  /* green */
  --success50: #f3f9ed;
  --success100: #daedcd;
  --success200: #c3e0aa;
  --success300: #aad68a;
  --success400: #93ca68;
  --success500: #7abe47; /*base*/
  --success600: #649d3a;
  --success700: #4e7a2e;
  --success800: #375721;
  --success900: #213413;
  --success1000: #0b1206;
}

h1 {
  text-decoration: none;
  font-size: 4rem; /* $h2 */
  line-height: 5rem; /* $h2 */
  font-weight: bold;
  font-family: "Rubik", sans-serif;
}

h2 {
  font-size: 4rem !important; /*h3*/
  line-height: 5rem !important; /*h3*/
  font-weight: bold;
  font-family: "Rubik", sans-serif;
}

@media only screen and (min-width: 640px) {
  h1 {
    text-decoration: none;
    font-family: "Rubik", sans-serif;
    font-size: 6.8rem !important;
    line-height: 7.2rem !important;
    font-weight: bold;
  }

  h2 {
    font-size: 5.6rem !important; /* $h2 */
    line-height: 6.2rem !important; /* $h2 */
    font-weight: bold;
    font-family: "Rubik";
  }
}

h3 {
  font-size: 4rem;
  line-height: 5rem;
  font-weight: bold;
  font-family: "Rubik", sans-serif;
}

h4 {
  font-size: 3rem;
  line-height: 3.8rem;
  font-weight: bold;
  font-family: "Rubik", sans-serif;
}

p {
  font-family: "Rubik", sans-serif;
  font-size: 2.2rem;
  line-height: 3rem;
}

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  word-break: break-all;
}

/* Anchors */
a {
  cursor: pointer;
  text-decoration: none;
}

/* Headings */
/* Lists */

ul.no-list {
  list-style: none;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 15px;
}

/* Horizontal rules */

hr {
  background-color: #ccc;
  border: none;
  color: #ccc;
  height: 1px;
}

/* Image alt text */

img {
  font-size: 14px;
  word-break: normal;
}

ul {
  list-style-type: none;
  margin: unset;
}

.btn-black_white {
  height: 6.4rem;
  line-height: 6.4rem;
  padding: 0 5rem;
  font-size: 2.2rem;
  background-color: var(--pitchBlack);
  color: var(--consoleWhite);
  box-shadow: inset 0 0 0 0.2rem var(--consoleWhite);
  display: inline-block;
  border-radius: 5.4rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: 125ms color ease, 125ms background-color ease,
    125ms box-shadow ease;
}

.center-text {
  text-align: center;
}

[class*="mdc"] {
  font-family: "Rubik", sans-serif !important;
}

.mdc-floating-label {
  font-size: 1.5rem !important;
  overflow: visible !important;
}

.mdc-form-field {
  font-size: 1.2rem !important;
}

.mdc-text-field__input {
  font-size: 1.5rem !important;
}

@media only screen and (max-width: 640px) {
  .mdc-checkbox__checkmark path {
    color: var(--consoleWhite) !important;
  }
}

label a,
.bg-bl a:not(.btn),
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: #f50049;
}

.isReq label:after {
  color: #f50049 !important;
}